import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import './index.css';


function Integral({ startGame }) {

	let [time, setTime] = useState(30);

	useEffect(() => {

	}, []);

	const start = () => {
		startGame();
		const t = setInterval(() => {
			if (time < 0) {
				clearInterval(t);
			} else {
				// time = time - 1

				setTime(time--)
			}
		}, 500);
	}

	// let countdown = () => {
	//     console.log("d")
	//     let t = setTimeout(() => {
	//         setTime(time - 1)
	//     }, 100);
	//     if (time === 0) {
	//         clearTimeout(t);
	//     }
	//     return time;
	// }

	return (
		<div className='header'>
			<button onClick={start}>开始游戏</button>
			<p>你的分数是：</p>
			{/* <p>剩余时间：{countdown()}</p> */}
			<p>{time}</p>
		</div>
	)
}

function Game() {

	const [data, setData] = useState(0);
	let [a, setA] = useState(0)

	let counter = () => {
		setData(data + 1);
	}


	const startGame = () => {
		setInterval(() => {
			setA(a++)
		}, 500)
	}


	const renderGrid = () => {
		const arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

		const rand = Math.ceil(Math.random() * 10);

		return arr.map((i, index) => {
			if (index === rand) {
				return <li className="red">{index}</li>
			}
			return <li>{index}</li>
		})
	}

	return (
		<div className='hotrod'>
			<Integral
				startGame={startGame}
			/>
			<ul className='game'>
				{renderGrid()}
				{/* <li onClick={counter}></li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li> */}
			</ul>
		</div>
	)
}
ReactDOM.render(<Game />, document.getElementById('root'))